<template>
  <view class="recommend-label">更多玩心小物</view>
  <view class="recommend-list">
    <view
      class="recommend-goods"
      v-for="item in props.listData"
      :key="item.id"
      @click.stop="toGoodsDetail(item)"
    >
      <view
        class="recommend-cover cover"
        :style="{ backgroundImage: `url(${item.imageUrl})` }"
      ></view>
      <view class="recommend-content">
        <view class="goods-name">
          {{ item.name }}
        </view>
        <view class="goods-price">
          <view class="price my-8px">
            <view class="master">{{ item.lowestPrice }}</view>
          </view>
          <view
            class="price reduce"
            v-if="item.originalPrice && item.originalPrice > 0"
            >{{ item.originalPrice }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps({
  listData: {
    type: Array,
  },
});

const toGoodsDetail = async (item) => {
  getApp().emdlz(
    "track",
    "event",
    "store_page",
    "click",
    `product_button_${item.id}`,
    ""
  );
  for (const res of item.productSkus) {
    getApp()
      .sr()
      .track("trigger_sku_component", {
        sku: {
          sku_id: res.id, // 若商品无sku_id时，可传spu_id信息
          sku_name: skuLabel(res.spData), // 若商品无sku_name时，可传spu_name信息
        },
        spu: {
          spu_id: res.id, // 若商品无spu_id时，可传sku_id信息
          spu_name: skuLabel(res.spData), // 若商品无spu_name时，可传sku_name信息
        },
      });
  }
  uni.navigateTo({ url: `/pages/goods/goods?id=${item.id}` });
};

const skuLabel = (skuData) => {
  return skuData.map(({ value, key }) => `${key}${value}`).join(" ");
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.recommend-label {
  padding: 21px 0 15px 0;
  line-height: 1;
  color: @base-color;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
}

.recommend-list {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  padding: 0 12px;
  justify-content: space-between;
  padding-bottom: 52px;
}

.recommend-goods {
  width: 171px;
  max-width: 50%;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;

  .recommend-cover {
    width: inherit;
    height: 173px;
    background-color: grey;
  }

  .recommend-content {
    width: 100%;
    color: #181a17;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #f8f8f8;
    box-sizing: border-box;
    padding: 8px;

    .goods-name {
      color: #212421;
      width: 100%;
      height: 35px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .goods-price {
      color: @primary-color;

      view {
        &:first-child {
        }

        &.reduce {
          font-size: 12px;
          color: #87a5f1;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
